<template>
  <a-form-model
    ref="formComp"
    layout="horizontal"
    class="AsteriskAfter newEditStyle h100 strategyDetailMain"
  >
    <full-parent-dom-with-dask :loading="loadingData"></full-parent-dom-with-dask>
    <!-- 通用前置条件 -->
    <a-row>
      <a-col :md="24" :sm="24">
        <a-form-model-item :label="$t('tyqztj')" class="customFormModelItem" prop>
          <a-row>
            <!-- SOC电量(%) -->
            <a-col :md="12" :sm="24">
              <a-row>
                <a-col :md="12" :sm="24">
                  {{ $t('socdl') }}
                  <question-mark-tip :tip-title="$t('socdlTip')" :popupContainer="getPopupContainer">
                  </question-mark-tip>
                </a-col>
                <a-col :md="12" :sm="24">
                  {{ formDataItems.lowestSoc || '-' }}
                </a-col>
              </a-row>
            </a-col>
            <!-- 蓄电池电压 -->
            <a-col :md="12" :sm="24">
              <a-row>
                <a-col :md="12" :sm="24" >
                  {{ $t('xdcdy') }}
                  <question-mark-tip :tip-title="$t('xdcdyTip')" :popupContainer="getPopupContainer">
                  </question-mark-tip>
                </a-col>
                <a-col :md="12" :sm="24">
                  {{ formDataItems.lowestVoltage || '-' }}
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row class="mt12">
            <!-- 倒计时时长(min) -->
            <a-col :md="12" :sm="24">
              <a-row>
                <a-col :md="12" :sm="24">
                  {{ $t('djssc') }}
                  <question-mark-tip :tip-title="$t('djsscTip')" :popupContainer="getPopupContainer">
                  </question-mark-tip>
                </a-col>
                <a-col :md="12" :sm="24">
                  {{ formDataItems.countDown || '-' }}
                </a-col>
              </a-row>
            </a-col>
            <!-- 下载失败次数 -->
            <a-col :md="12" :sm="24">
              <a-row>
                <a-col :md="12" :sm="24" >
                  {{ $t('xzsbcs') }}
                  <question-mark-tip
                    :tip-title="$t('xzsbcsTip')"
                    :popupContainer="getPopupContainer"
                  ></question-mark-tip>
                </a-col>
                <a-col :md="12" :sm="24">
                  {{ formDataItems.failureNumber || '-' }}
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row class="mt12">
            <!-- 可升级温度(℃) -->
            <a-col :md="12" :sm="24">
              <a-row>
                <a-col :md="12" :sm="24">
                  {{ $t('ksjcwd') }}
                  <question-mark-tip :tip-title="$t('ksjcwdTip')" :popupContainer="getPopupContainer">
                  </question-mark-tip>
                </a-col>
                <a-col :md="12" :sm="24">
                  {{ formDataItems.temperature || '-' }}
                </a-col>
              </a-row>
            </a-col>
            <!-- 升级失败次数 -->
            <a-col :md="12" :sm="24">
              <a-row>
                <a-col :md="12" :sm="24">
                  {{ $t('sjsbcs') }}
                  <question-mark-tip :tip-title="$t('sjsbcsTip')" :popupContainer="getPopupContainer">
                  </question-mark-tip>
                </a-col>
                <a-col :md="12" :sm="24">
                  {{ formDataItems.upgradeFailureNumber || '-' }}
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-form-model-item>
      </a-col>
    </a-row>
    <!-- 烧写设置 -->
<!--    <a-row>-->
<!--      <a-col :md="24" :sm="24">-->
<!--        <a-form-model-item :label="$t('sxSetting')" class="customFormModelItem" prop>-->
<!--          <a-row>-->
<!--            &lt;!&ndash; 是否自由烧写 &ndash;&gt;-->
<!--            <a-col :md="12" :sm="24">-->
<!--              <a-row>-->
<!--                <a-col :md="12" :sm="24">-->
<!--                  {{ $t('sfzysx') }}-->
<!--                </a-col>-->
<!--                <a-col :md="12" :sm="24">-->
<!--                  {{ $t(formDataItems.isFreeBurning === '1' ? 'yes' : 'no') }}-->
<!--                </a-col>-->
<!--              </a-row>-->
<!--            </a-col>-->
<!--            &lt;!&ndash; 自由烧写次数 &ndash;&gt;-->
<!--            <a-col :md="12" :sm="24">-->
<!--              <a-row>-->
<!--                <a-col :md="12" :sm="24" >-->
<!--                  {{ $t('zysxCount') }}-->
<!--                </a-col>-->
<!--                <a-col :md="12" :sm="24">-->
<!--                  {{ formDataItems.freeBurningTime || '-' }}-->
<!--                </a-col>-->
<!--              </a-row>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </a-form-model-item>-->
<!--      </a-col>-->
<!--    </a-row>-->
  </a-form-model>
</template>
<script>
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import { strategyInitFormItems } from '../config/form'
const strategyInitFormItemsReset = {}
Object.keys(strategyInitFormItems).forEach(key => {
  strategyInitFormItemsReset[key] = ''
})
export default {
  components: {
    FullParentDomWithDask,
    QuestionMarkTip
  },
  props: {
    items: {
      type: Array,
      default () {
        return []
      }
    },
    loadingData: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formDataItems: { ...strategyInitFormItemsReset },
      spinningLoading: false
    }
  },
  watch: {
    items: {
      handler (val) {
        if (val.length) {
          this.setFormDataItems(val)
        } else {
          this.initFormDataItems()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 编辑时设置已配置的选项
    setFormDataItems (items) {
      const obj = {}
      items.forEach(item => {
        obj[item.code] = item.value
      })
      this.formDataItems = obj
    },
    initFormDataItems () {
      this.formDataItems = { ...strategyInitFormItemsReset }
    },
    getPopupContainer (node) {
      return node.parentNode.parentNode
    }
  }
}
</script>
<style scoped lang="less">
.strategyDetailMain {
  overflow: auto;
  position: relative;
}
</style>
